<!DOCTYPE html>
<html>
    <head>
        <!-- 页面meta -->
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>守护云</title>
        <meta name="description" content="守护云">
        <meta name="keywords" content="守护云">
        <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
        <!-- 引入样式 -->
        <link rel="stylesheet" href="../plugins/elementui/index.css">
        <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">

        <script src="../js/healthmobile.js"></script>
        <link rel="stylesheet" href="../css/style.css">
        <style>
            .grid-content {
                border-radius: 4px;
                min-height: 40px;
            }
        </style>
    </head>
    <body class="hold-transition">
        <div id="app">
            <div class="content-header">
                <h1>统计分析<small>操作数据</small></h1>
                <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>统计分析</el-breadcrumb-item>
                    <el-breadcrumb-item>操作数据</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <div class="app-container">
                <div class="box" style="height: 520px">
                    <div class="excelTitle" >
                        操作数据统计
                    </div>
                    <div style="align-content: center">
                        <template style="align-content: center">
                            <div class="block">
                                <span class="demonstration">选择日期</span>
                                <el-date-picker
                                        v-model="redisDate"
                                        align="right"
                                        type="date"
                                        placeholder="选择日期"
                                        :picker-options="pickerOptions">
                                </el-date-picker>
                            </div>
                        </template>
                    </div>
                    <el-table size="small" current-row-key="id" :data="tableData" stripe highlight-current-row>
                        <el-table-column type="index" align="center" label="序号"></el-table-column>
                        <el-table-column prop="name" label="名称" align="center"></el-table-column>
                        <el-table-column prop="value" label="数量" align="center"></el-table-column>
                    </el-table>
                </div>

            </div>

        </div>
    </body>
    <!-- 引入组件库 -->
    <script src="../js/vue.js"></script>
    <script src="../plugins/elementui/index.js"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
    <script>
        var vue = new Vue({
            el: '#app',
            data:{
                count:3,
                Iid:null,
                redisDate:"",
                tableData :[{}],
                pickerOptions:{}
            },
            created() {
                this.redisDate = getToday();
                this.getCheck();
                this.Interval();
                // disabledDate 为true表示不可选,false表示可选
                this.pickerOptions.disabledDate = function disabledDate(time){
                    // 设置可选择的日期为今天之后的一个月内
                    // let curDate = (new Date()).getTime()
                    // 这里算出一个月的毫秒数,这里使用30的平均值,实际中应根据具体的每个月有多少天计算
                    // let day = 30 * 24 * 3600 * 1000
                    // let dateRegion = curDate + day
                    // return time.getTime() < Date.now() - 8.64e7 || time.getTime() > dateRegion

                    // 设置选择的日期小于当前的日期,小于返回true,日期不可选
                    // return time.getTime() < Date.now() - 8.64e7
                    return time.getTime() > Date.now() - 1 - 8.64e7
                }
            },
            methods:{
                Interval(){
                     this.Iid = setInterval(this.getCheck,5000);
                     console.log(this.Iid)
                },
                destrory(id){
                    clearInterval(id)
                    this.Interval();
                },
                resDate(date){
                    const d = new Date(this.redisDate);
                    return d.getFullYear() + '-' + this.p((d.getMonth() + 1)) + '-' + this.p(d.getDate());
                },
                p(s) {
                    return s < 10 ? '0' + s : s
                },
                getCheck(){
                    this.redisDate = this.resDate(this.redisDate);
                    console.log(this.redisDate);
                    axios.get("/redis/getCheckList.do?date=" + this.redisDate).then((res)=>{
                        this.tableData = [];
                        if(res.data.flag){
                            console.log(res);
                            this.tableData = res.data.data;
                            console.log(this.tableData)
                        }else{
                            this.$message.error(res.data.message);
                        }
                    });
                    if (this.count > 0){
                        this.count--;
                    } else {
                        this.destrory(this.Iid);
                        console.log(this.Iid)
                        this.count = 3
                    }
                }
            }
        })
    </script>
</html>
